<template>
    <div class="goods_index_two">
        <div>
            <el-button type="primary" style="margin-top: 1px;" @click="addGoods()">+新增商品</el-button>
        </div>
        <goods-list :tableData="tableData" :total="total" :size="size" :currentPage="currentPage" :moreDelectId="moreDelectId"></goods-list>
        <div class="add_goods_two">
            <el-drawer
                    :title="title"
                    :visible.sync="drawer"
                    :direction="direction"
                    :before-close="handleClose">

                <div class="add_box_input">
                    <div class="title_value">商品信息：</div>
                    <p style="padding-right: 5px;font-size: 14px;">
                        <span class="symbol">*</span> 商品名字：<el-input placeholder="请输入商品名字" v-model="name" clearable></el-input>
                        <br/><br/>
                        <span class="symbol">*</span> 单价：<el-input placeholder="请输入内容" v-model="pice" clearable></el-input>
                        <br/><br/>
                        <span class="symbol">*</span> 库存：<el-input placeholder="库存" type="number" v-model="stock" clearable></el-input>
                        <br/><br/>
                        详情：  <el-input
                            type="textarea"
                            placeholder="请输入内容"
                            v-model="details"
                            maxlength="30"
                            show-word-limit
                    >
                    </el-input>
                    </p>
                    <div class="title_value">上传文件：
                        <el-upload
                                ref="upload"
                                class="upload-demo"
                                drag
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :http-request="uploadVideo"
                                multiple
                                :limit="1"
                        >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传jpg、png文件，且不超过10mb</div>
                        </el-upload>
                    </div>

                    <div style="float: right;padding-right: 10px;">
                        <el-button @click="handleClose">取消</el-button>
                        <el-button type="primary" @click="change" v-if="checkSubmit">修改</el-button>
                        <el-button type="primary" @click="submit" v-else>确定</el-button>
                    </div>
                </div>

            </el-drawer>
        </div>
    </div>
</template>

<script>
    import GoodsList from "./goodsList";
    import OSS from 'ali-oss'
    import {goodsTwoListApi, goodsTwoDelectApi, goodsTwoAddApi, goodsTwoChangeApi} from '@/api/backstage/goodsIndex/goodsIndexTwo'
    export default {
        name: "goodsIndexTwo",
        components: {GoodsList},
        data(){
            return{
                title:'新增商品',
                checkSubmit:0,
                changId:'',
                tableData: [],
                moreDelectId:[],
                currentPage:1,
                size:10,
                total:0,
                drawer: false,
                direction: 'rtl',
                name:'',
                pice:'',
                stock:'',
                details:'',
                imgUrl:'',
            }
        },
        methods:{
            change(){
                let row = {
                    "id":this.changId,
                    "goods_name":this.name,
                    "pice":this.pice,
                    "goods_stock":this.stock,
                    "details":this.details,
                    "img_url":this.imgUrl
                }
                if (this.name !=='' && this.pice !=='' && this.stock !=='')
                {
                    //    商品二修改
                    goodsTwoChangeApi(row).then(() =>{
                        this.name ='';this.pice='';this.stock='';this.details='';this.imgUrl='';
                        this.$message({type: 'success', message: '修改成功!'});
                        this.$refs.upload.clearFiles();
                        this.showList();
                        this.drawer = false;
                    });
                }else{
                    this.$message({type: 'info', message: '请填写完整!'});
                }
            },
            openDrawer(row,index){
                if (index){
                    this.title = '商品详情';
                    this.name = row.goods_name;
                    this.pice = row.pice;
                    this.stock = row.goods_stock;
                    this.details = row.details;
                    this.changId = row.id;
                    this.imgUrl = row.img_url;
                    this.checkSubmit = index
                }else {
                    this.title = '新增商品';
                    this.name = '';
                    this.pice = '';
                    this.stock = '';
                    this.details = '';
                    this.imgUrl = '';
                    this.checkSubmit=0;
                }
                this.drawer = true;
            },
            showList(){
                goodsTwoListApi(this.currentPage,this.size).then(res =>{
                    this.tableData = res.data.content;
                    this.total = res.data.totalElements;
                    console.log(res.data)
                })
            },
            check(){
                let arrayId= [];
                for (let i=0;i< this.moreDelectId.length;i++)
                {
                    arrayId.push(this.moreDelectId[i].id);
                }
                goodsTwoDelectApi(arrayId).then(res=>{
                    this.showList();
                    this.$message({type: 'success', message: '删除成功!'});
                })
            },
            addGoods() {
                this.openDrawer();
            },
            //   添加商品
            submit(){
                let row = {
                    "goods_name":this.name,
                    "pice":this.pice,
                    "goods_stock":this.stock,
                    "details":this.details,
                    "img_url":this.imgUrl
                }
                if (this.name !=='' && this.pice !=='' && this.stock !=='')
                {
                    //    商品一添加
                    goodsTwoAddApi(row).then(() =>{
                        this.name ='';this.pice='';this.stock='';this.details='';this.imgUrl='';
                        this.$message({type: 'success', message: '添加成功!'});
                        this.$refs.upload.clearFiles();
                        this.showList();
                        this.drawer = false;
                    });
                }else{
                    this.$message({type: 'info', message: '请填写完整!'});
                }
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            openDrawer(row,index){
                if (index){
                    this.title = '商品详情';
                    this.name = row.goods_name;
                    this.pice = row.pice;
                    this.stock = row.goods_stock;
                    this.details = row.details;
                    this.changId = row.id;
                    this.imgUrl = row.img_url;
                    this.checkSubmit = index
                }else {
                    this.title = '新增商品';
                    this.name = '';
                    this.pice = '';
                    this.stock = '';
                    this.details = '';
                    this.imgUrl = '';
                    this.checkSubmit=0;
                }
                this.drawer = true;
            },
            async uploadVideo(options){
                console.log(options.file.name);
                let fileName = options.file.name.lastIndexOf(".");//获取到文件名开始到最后一个“.”的长度。
                let fileNameLength = options.file.name.length;//获取到文件名长度
                let fileFormat = options.file.name.substring(fileName + 1, fileNameLength);//截取后缀名
                const client = new OSS({
                    region: 'oss-cn-chengdu',
                    accessKeyId: 'LTAI4G7xLwyqhsbHHEr77sDa',
                    accessKeySecret: 'tXuM1SF5aD04od2pFOXDbJupsZ1M2q',
                    bucket: 'yangshen520'
                });
                let name = Date.now()+'.' + fileFormat;
                let url ="https://yangshen520.oss-cn-chengdu.aliyuncs.com/" + name;
                try {
                    await client.put(name, options.file,(res)=>{
                        console.log(res);
                    });
                    console.log(url);
                } catch (e) {
                    this.$message.error('上传失败')
                }
                this.imgUrl = url
            }
        },
        created() {
            this.showList();
        }
    }
</script>

<style lang="scss" scoped>
.goods_index_two{
    .add_goods_two{
        /deep/.el-drawer__header{
            font-size: 20px !important;
            color: #000c17;
            font-weight: bold;
        }
        /deep/.el-drawer{
            width: 30% !important;
        }
        /deep/.el-upload-dragger{
            height: 100px !important;
            .el-icon-upload{
                margin-top: 10px;
                font-size: 50px;
            }
            .el-upload__text{
                margin-top: -10px;
            }
        }
        .add_box_input{
            margin-left: 20px;
            .title_value{
                font-size: 16px;
                font-weight: bold;
            }
            .symbol{
                font-weight: bold;
                color: red;
            }
        }
    }
}
</style>
